<template>
  <div class="addaccount bgfff">
    <p style="padding: 10px; border-bottom: 1px solid #f2f2f2; font-size: 18px">
      添加帐号
    </p>
    <p style="margin: 20px 100px 0px">
      帐号:
      <el-input
        style="width: 250px"
        placeholder="请输入帐号"
        v-model="account"
        clearable
      >
      </el-input>
    </p>
    <p style="margin: 20px 100px 0px">
      密码:
      <el-input
        style="width: 250px"
        placeholder="请输入密码"
        v-model="password"
        show-password
      ></el-input>
    </p>
    <p style="margin: 20px 84px 0px">
      用户组:
      <el-select
        style="width: 250px"
        v-model="usergroup"
        slot="prepend"
        placeholder="请选择用户组"
      >
        <el-option label="超级管理员" value="超级管理员"></el-option>
        <el-option label="普通管理员" value="普通管理员"></el-option>
      </el-select>
    </p>

    <p style="margin: 20px 150px 0px">
      <el-button type="success" @click="addBtn">添加</el-button>
      <el-button style="background: #ffcc00; color: #fff" @click="resetBtn"
        >重置</el-button
      >
    </p>
  </div>
</template>

<script>
import { addaccount } from "@/apis/users";
export default {
  data() {
    return {
      account: "",
      password: "",
      usergroup: "普通管理员",
    };
  },
  methods: {
    //点击添加
    addBtn() {
      //ajax
      addaccount({
        account: this.account,
        password: this.password,
        userGroup: this.usergroup,
      }).then((res) => {
        // console.log(res.data);
        if (res.data.code == 0) {
          this.$message({
            message: "系统提示:  添加管理员成功 §(*￣▽￣*)§",
            type: "success",
          });
          this.resetBtn();
        } else {
          this.$message.error("系统提示:  帐号和密码不能为空! ⊙﹏⊙∥");
        }
      });
    },
    //点击重置
    resetBtn() {
      (this.account = ""),
        (this.password = ""),
        (this.usergroup = "普通管理员");
    },
  },
  created() {
    this.$bus.emit("subTitle", "帐号管理>", "添加帐号>");
  },
};
</script>

<style lang="less" scoped>
.addaccount {
  padding-bottom: 40px;
}
</style>